<template>
  <div>
    <Section class="pb-0" underline>
      <div class="flex pt-10" v-if="author">
        <div class="resume relative flex w-full">
          <div
            class="absolute left-0 top-0 -z-10 h-80 w-full rounded bg-gradient-to-br from-primary/60 to-base-200"
          ></div>
          <div class="p-8 md:w-1/2">
            <h1 class="font-sans text-6xl font-semibold">
              {{ author.name }}
            </h1>
            <p class="my-4 font-sans uppercase">
              {{ author.job }}
            </p>
            <div class="mb-4 w-[80%]">
              <img
                alt="Author Photo"
                class="h-full w-full object-cover object-center"
                :src="author.photo ?? `/api/avatar/${author.nickname}.svg`"
              />
            </div>
            <div>
              <h3 class="my-6">
                <span class="rounded bg-primary px-4 py-2 text-2xl text-white">
                  联系方式
                </span>
              </h3>
              <ZMdView
                class="prose text-base-content"
                :content="author.contact"
                html
                xhtml-out
              />
            </div>
            <div>
              <h3 class="my-6">
                <span class="rounded bg-primary px-4 py-2 text-2xl text-white">
                  技能
                </span>
              </h3>
              <ZMdView
                class="prose text-base-content"
                :content="author.skills"
                html
                xhtml-out
              />
            </div>
          </div>
          <div class="flex-1 p-8">
            <ZMdView
              class="prose mb-16 h-64 text-base-content"
              :content="author.basic"
              html
              xhtml-out
            />
            <div>
              <h3 class="my-6">
                <span class="rounded bg-primary px-4 py-2 text-2xl text-white">
                  教育情况
                </span>
              </h3>
              <ZMdView
                class="prose text-base-content"
                :content="author.education"
                html
                xhtml-out
              />
            </div>
            <div>
              <h3 class="my-6">
                <span class="rounded bg-primary px-4 py-2 text-2xl text-white">
                  项目经验
                </span>
              </h3>
              <ZMdView
                class="prose text-base-content"
                :content="author.workExperience"
                html
                xhtml-out
              />
            </div>
          </div>
        </div>
      </div>
    </Section>
    <Section class="bg-base-300">
      <div
        class="relative flex flex-col items-center justify-between gap-y-4 pb-10 pt-10 md:flex-row"
      >
        <SectionTitle title="所有发布的文章">
          以下是<span class="mx-2 uppercase text-primary">{{
            author?.nickname
          }}</span>
          撰写的所有文章。我们希望您能找到您想要的东西。
          如果您喜欢以下内容，请考虑通过在社交媒体与他们联系，来支持我们的作者。
        </SectionTitle>
        <InnerLinks />
      </div>
      <div
        class="mb-20 grid gap-6 sm:gap-4 md:grid-cols-2 lg:grid-cols-3"
        v-if="posts?.success"
      >
        <PostCardWithDigest
          v-for="post in posts?.query.results"
          :key="post.id"
          :post="post"
          digest
        />
      </div>
      <div class="flex items-center justify-between px-4">
        <InnerLinks />
        <ZPagination
          :total="total"
          v-model:page="page"
          v-model:page-size="pageSize"
          :buttons="['first', 'last']"
        />
      </div>
    </Section>
  </div>
</template>
<script setup lang="ts">
import ZMdView from "@/components/ZMdView.vue";
import { useApiFetch, ApiResponse } from "@/composables/useApiFetch";
import { useUrlParams } from "@/composables/useUrlParams";
import type { User, Resume, Post } from "@/stores/types";
import { useRouteParamsWith } from "@/composables/useRouteParamsWith";

const authorId = useRouteParamsWith("id");
const { data } = useApiFetch(
  computed(() => `/author-details/${authorId.value}`),
  { refetch: true },
).json<ApiResponse<User & Resume>>();

const author = computed(() => data.value?.object);

// 获取作者的文章
const total = ref(0),
  page = ref(1),
  pageSize = ref(12);
const params = computed(() => ({
  limit: pageSize.value,
  offset: (page.value - 1) * pageSize.value,
}));
const urlParams = useUrlParams(params);
// 获取所有文章
const { data: posts } = useApiFetch(
  computed(() => `/author-posts/${authorId.value}?${urlParams.value}`),
  { refetch: true },
).json<ApiResponse<Post & User>>();
watch(posts, (val) => {
  if (val?.success) {
    total.value = val.query.count;
  }
});
</script>
